import { ConfigProvider, Layout, List, theme,Avatar,Divider,Skeleton } from 'antd';
import { Content } from 'antd/es/layout/layout';
import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const System = () => {

    //请求
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const loadMoreData = () => {
        if (loading) {
        return;
        }
        setLoading(true);
        fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
        .then((res) => res.json())
        .then((body) => {
            setData([...data, ...body.results]);
            setLoading(false);
        })
        .catch(() => {
            setLoading(false);
        });
    };
    useEffect(() => {
        loadMoreData();
    }, []);
    return (
        <ConfigProvider
        theme={{
            token: {
                // Seed Token，影响范围大
                colorPrimary: '#73d13d',
                borderRadius: 20,
                // 派生变量，影响范围小
                colorBgContainer: '#f6ffed',
            },
        }}>
            


            <div
            id="scrollableDiv"
            style={{
                height: 600,
                overflow: 'auto',
                padding: '0 16px',
                
            }}
            >
            <InfiniteScroll
                dataLength={data.length}
                next={loadMoreData}
                hasMore={data.length < 50}
                loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
                scrollableTarget="scrollableDiv"
            >
                <List
                dataSource={data}
                renderItem={(item) => (
                    <List.Item key={item.email}>
                    <List.Item.Meta
                        avatar={<Avatar src={item.picture.large} />}
                        title={<a href="https://ant.design">{item.name.last}</a>}
                        description={item.email}
                    />
                    <div>Content</div>
                    </List.Item>
                )}
                />
            </InfiniteScroll>
            </div>

        </ConfigProvider>
    );
}

export default System